<template>
  <div class="outmain ba_f">
    <div class="shuju_title mar_b20">
      <div class="shuju_title_text">
        <span>订单查询</span>
      </div>
    </div>
    <div class="pad_b_30 orderSeatch">
      <el-form :inline="false" :model="formInline" class="demo-form-inline" label-width="100px">
        <template>
          <el-form-item label="订单状态：">
            <el-radio-group v-model="formInline.orderState" @change="selectType">
              <el-radio-button label="0">不限</el-radio-button>
              <el-radio-button label="1">待接单</el-radio-button>
              <el-radio-button label="9">待核销</el-radio-button>
              <el-radio-button label="6" :disabled="formInline.orderType=='3'">待配送</el-radio-button>
              <el-radio-button label="8" :disabled="formInline.orderType=='3'">配送中</el-radio-button>
              <el-radio-button label="10">已完成</el-radio-button>
              <el-radio-button label="5">已取消</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </template>
        <el-form-item label="订单类型：" class="mar_t20">
          <el-radio-group v-model="formInline.orderType" @change="selectType">
            <el-radio-button label="0">不限</el-radio-button>
            <el-radio-button label="4">普通单</el-radio-button>
            <el-radio-button label="3">自提订单</el-radio-button>
          </el-radio-group>
          <el-checkbox class="mar_l20" v-model="formInline.appointment" @change="selectType" true-label="1"
                       false-label="0">预订单
          </el-checkbox>
        </el-form-item>
        <el-form-item label="支付方式：" class="mar_t20">
          <el-radio-group v-model="formInline.payMode" @change="selectType">
            <el-radio-button label="0">不限</el-radio-button>
            <el-radio-button label="1">微信支付</el-radio-button>
            <el-radio-button label="5">余额支付</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="下单日期：" class="mar_t20">
          <div class="flex-bet">
            <div>
              <el-radio-group v-model="formInline.timeType" @change="selectType">
                <el-radio-button label="3">近七日</el-radio-button>
                <el-radio-button label="1">近两日</el-radio-button>
                <el-radio-button label="2">具体日期</el-radio-button>
              </el-radio-group>
              <span class="mar_l20" v-if="formInline.timeType=='2'">
                <el-date-picker v-model="formInline.time" type="daterange" range-separator="至" start-placeholder="开始日期"
                                end-placeholder="结束日期" format="yyyy年MM月dd日" @change="selectType"></el-date-picker>
              </span>
            </div>
            <!--            <div class="pad_r_20">-->
            <!--              <a :href="handelExport()" class="mar_l10"><el-button  size="medium" type="primary">导出订单</el-button></a>-->
            <!--            </div>-->
          </div>
        </el-form-item>
        <el-form-item label="模糊搜索：" label-position="top" class="mar_t20">
          <div class="flex">
            <div>
              <el-input type="text" v-model="formInline.keyword" style="width: 500px;"
                        placeholder="请输入订单相关的订单号/手机号/订单姓名/昵称" @input="selectType"></el-input>
            </div>
            <div class="pad_r_20 mar_l20">
              <!--              <el-button type="primary" @click="selectType">搜索</el-button>-->
              <a :href="handelExport()" class="mar_l10">
                <el-button size="medium" type="primary">导出订单</el-button>
              </a>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="flex-bet flex-y-top">
      <div class="bflex-7">
        <order-state ref="orderState" :state="'0'" v-if="orderlist.length<=0"></order-state>
        <order-list ref="orderList" :list="orderlist" @initMethod="init"></order-list>
      </div>
      <div class="bflex-3 mar_t20 mar_l30" v-if="orderlist.length>0">
        <div class="shuju_title">
          <div class="shuju_title_text">
            <span>当日订单情况</span>
          </div>
        </div>
        <div class="orderGk pad_10 flex-bet color_6">
          <div class="flex-g-1 t_c bor_r_de4">
            <div>有效订单（单）</div>
            <div class="fon_40">{{ orderStatistic.orderNum || 0 }}</div>
          </div>
          <div class="flex-g-1 t_c">
            <div>营业额（元）</div>
            <div class="fon_40">{{ orderStatistic.money || 0.00 }}</div>
          </div>
        </div>
      </div>
    </div>
    <el-pagination
        background
        layout="prev, pager, next"
        :total="page.total"
        :page-size="page.pagesize"
        :current-page.sync='page.currentPage'
        :hide-on-single-page="page.value"
        @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</template>
<script>
import OrderState from "../../../views/order/components/orderState";
import OrderList from "../../../views/order/components/orderList";
import {orderList, orderStatistic} from "@/api/order";
import {changeDate} from "@/utils/index";
import {mapState} from "vuex";
import index from '../../../api/index';

export default {
  components: {OrderState, OrderList},
  computed: {
    ...mapState(['storeId']),
  },
  created() {
    // this.bus.$emit('loading', true);
    if (this.$route.query.orderType) {
      this.formInline.orderType = this.$route.query.orderType
      this.formInline.orderState = this.$route.query.orderState
    }
    this.init();
    this.fforderStatistic()
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      formInline: {
        time: [new Date(), new Date()],
        timeType: '1',
        orderType: '0',
        serviceAt: '1',
        orderState: '0',
        keyword: '',
        appointment: '',
        payMode: '0',
      },
      orderlist: [],
      page: {
        total: 0,
        size: 10,
        currentPage: 1,
      },
      orderStatistic: {},
    }
  },
  methods: {
    async init() {
      var params = {
        page: this.page.currentPage,
        orderType: this.formInline.orderType,
        timeType: this.formInline.timeType,
        startTime: this.formInline.timeType == '2' && this.formInline.time ? changeDate(this.formInline.time[0]) : '',
        endTime: this.formInline.timeType == '2' && this.formInline.time ? changeDate(this.formInline.time[1]) : '',
        state: this.formInline.orderState,
        serviceAt: this.formInline.serviceAt,
        storeId: this.storeId,
        keyword: this.formInline.keyword,
        appointment: this.formInline.appointment,
        payMode: this.formInline.payMode,
      }
      const {data, count} = await orderList(params);
      this.orderlist = data
      this.page.total = count;
      if (count > 0) {
        this.page.value = false
      } else {
        this.page.value = true
      }
      this.$emit('orderList', data)
      this.bus.$emit('loading', false)
    },
    async fforderStatistic() {
      const {data} = await orderStatistic({ storeId: this.storeId});
      this.orderStatistic = data;
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.init();
    },
    selectType() {
      this.init();
    },
    selectTimeTypeData() {
      this.init();
    },
    handelExport() {
      let startTime = this.formInline.time ? changeDate(this.formInline.time[0]) : ''
      let endTime = this.formInline.time ? changeDate(this.formInline.time[1]) : ''
      let backendPath = index.backendPath
      return backendPath + "channel/order/order-list?export=1" + '&page=' + this.page.currentPage + '&orderType=' + this.formInline.orderType + '&timeType=' + this.formInline.timeType + '&startTime=' + startTime + '&endTime=' + endTime + '&orderState=' + this.formInline.orderState + '&serviceAt=' + this.formInline.serviceAt + '&storeId=' + this.storeId
    },
  }

}
</script>
<style lang="scss" scoped>
.search .el-form-item__label {
  padding-right: 10px;
  padding-left: 15px;
}

.el-form-item__content .el-input {
  width: 300px;
}

.el-form-item {
  margin-bottom: 8px;
}
.orderGk{
  background: #F9F9F9;
}
</style>